import React, {Component} from 'react';

import './index.less';

import {base, promptBox} from 'nc-lightapp-front';

import Transfer from '../../../../hrpub/common/components/Transfer';
import {getColor} from '../../../../hrpub/common/utils/utils';

const {color, bgColor} = getColor();

const {
    NCModal,
    NCButton,
    NCSelect,
    NCIcon,
    NCStep
} = base;

const {
    NCOption
} = NCSelect;


const {
    Header: ModalHeader,
    Body: ModalBody,
    Footer: ModalFooter
} = NCModal;

const {NCSteps} = NCStep;


class DesignReportModal extends Component {
    constructor(props) {
        super(props);

        this.transferChange = this.transferChange.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.initModal = this.initModal.bind(this);
    }

    closeModal() {
        const {
            onClose,
            language
        } = this.props;

        promptBox({
            color: 'warning',
            title: language['hi6007-000196'], // 确认取消
            content: language['hi6007-000009'], // 是否确认要取消
            beSureBtnClick: () => {
                onClose && onClose();
            }
        });   
    }

    transferChange(targetKeys, direction, moveKeys) {
        const {
            onChange
        } = this.props;

        onChange && onChange(targetKeys, direction, moveKeys);
    }

    initModal() {
        this.forceUpdate();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if(!this.props.visible && !nextProps.visible) {
            return false
        }

        return true;
    }

    render() {
        let {
            visible,
            language,
            leftData,
            rightData,
            transferOpts,
            onChangeInfoGroup,
            transferCurrentInfoGroup,
            transferCurrentStep,
            transferSortList,
            ifHighLight,
            MultiInit
        } = this.props;
    

        return (
            <NCModal
                show={visible}
                onHide={this.closeModal}
                onEntered={this.initModal}
                className="design-report-modal"
                size="lg"
            >
                <ModalHeader
                    closeButton={true}
                >
                    {language['hi6007-000203']} {/* 花名册报表设计 */}
                </ModalHeader>
                <ModalBody>
                    <div className="transfer-modal-body-wrapper">
                        <div className="transfer-modal-step-wrapper">
                            <NCSteps 
                                current={transferCurrentStep - 1}
                                size="small"
                            >
                                <NCStep 
                                    title={language['hi6007-000214']/**"选择显示项" */}
                                />
                                <NCStep 
                                    title={language['hi6007-000215']/**"选择排序项" */}
                                />
                            </NCSteps>
                        </div>
                        <div className="transfer-modal-left">
                            <div className="transfer-info-group-select">
                                {
                                    transferCurrentStep === 1 && 
                                    <NCSelect
                                        defaultValue={transferCurrentInfoGroup}
                                        onChange={onChangeInfoGroup}
                                    >
                                        {transferOpts.map((item, index) => {
                                            return (
                                                <NCOption
                                                    value={item.value}
                                                >
                                                    {item.display}
                                                </NCOption>
                                            );
                                        })}
                                    </NCSelect>
                                }
                               
                            </div>
                            <div className="transfer-modal-wrapper">
                                <If condition={transferCurrentStep === 1}>
                                    <Transfer
                                        from='rosterSetting'
                                        MultiInit={MultiInit}
                                        leftData={leftData}
                                        rightData={rightData}
                                        onChange={this.transferChange}
                                        style={{
                                            height: '300px'
                                        }}
                                        rightTitle={language['hi6007-000207'] /** 显示顺序 */}
                                        onChecked={this.props.onCheckedTransfer}
                                    /> 
                                </If>
                                <If condition={transferCurrentStep === 2}>
                                    <Transfer
                                        from='rosterSetting'
                                        MultiInit={MultiInit}
                                        leftData={rightData}
                                        rightData={transferSortList}
                                        onChange={this.transferChange}
                                        style={{
                                            height: '300px'
                                        }}
                                        leftTitle={language['hi6007-000216']/** 可选择信息项 */}
                                        rightTitle={language['hi6007-000217'] /** 排序信息项 */}
                                        onChecked={this.props.onCheckedTransfer}
                                    />
                                </If>
                            </div>
                        </div>
                        <div 
                            className="transfer-modal-right"
                        >
                            <div 
                                className={`transfer-move-btn ${ifHighLight.upp ? 'transfer-move-btn-able' : ''}`}
                                onClick={this.props.moveItems('upp')}
                                style={{
                                    color: color,
                                    background: bgColor
                                }}
                            >
                                <NCIcon 
                                    type="uf-2arrow-up"
                                />
                            </div>
                            <div 
                                className={`transfer-move-btn ${ifHighLight.up ? 'transfer-move-btn-able' : ''}`}
                                onClick={this.props.moveItems('up')}
                                style={{
                                    color: color,
                                    background: bgColor
                                }}
                            >
                                <NCIcon 
                                    type="uf-arrow-up"
                                />
                            </div>
                            <div 
                                className={`transfer-move-btn ${ifHighLight.down ? 'transfer-move-btn-able' : ''}`}
                                onClick={this.props.moveItems('down')}
                                style={{
                                    color: color,
                                    background: bgColor
                                }}
                            >
                                <NCIcon 
                                    type="uf-arrow-down"
                                />
                            </div>
                            <div 
                                className={`transfer-move-btn ${ifHighLight.downn ? 'transfer-move-btn-able' : ''}`}
                                onClick={this.props.moveItems('downn')}
                                style={{
                                    color: color,
                                    background: bgColor
                                }}
                            >
                                <NCIcon 
                                    type="uf-2arrow-down"
                                />
                            </div>
                        </div>
                    </div>
                </ModalBody>
                <ModalFooter>
                    <NCButton
                        disabled={transferCurrentStep === 1}
                        onClick={this.props.transferTurnStep(1)}
                    >
                        {language['hi6007-000204']} {/*上一步*/}
                    </NCButton>
                    <NCButton
                        disabled={transferCurrentStep === 2}
                        onClick={this.props.transferTurnStep(2)}
                    >
                        {language['hi6007-000205']}{/*下一步*/}
                    </NCButton>
                    <NCButton
                        disabled={transferCurrentStep === 1}
                        onClick={this.props.submitDesignModal}
                    >
                        {language['hi6007-000206']}{/*完成*/}
                    </NCButton>
                    <NCButton
                        onClick={this.closeModal}
                    >
                        {language['hi6007-000005']/** 取消 */}
                    </NCButton>
                </ModalFooter>
            </NCModal>
        );
    }
}

export default DesignReportModal;